<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">
<head>
    <title>操作日志</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
    <script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/kindeditor/kindeditor.js}" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--顶部：搜索form表单-->
<form class="layui-form">
    操作模块：
    <div class="layui-inline layui-input-wrap">
        <input type="text" name="module" lay-affix="clear" class="layui-input">
    </div>
    操作类型：
    <div class="layui-inline layui-input-wrap">
        <input type="text" name="logType" lay-affix="clear" class="layui-input">
    </div>
    <!--操作类型：
    <div class="layui-inline layui-input-wrap">
        <select id="logType" name="logType" lay-filter="logType">
            <option value="">请选择</option>
        </select>
    </div>-->
    开始创建时间：
    <div class="layui-inline">
        <input type="text" name="beginCreateTime" id="beginCreateTime" lay-verify="datetime" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">
    </div>
    结束创建时间：
    <div class="layui-inline">
        <input type="text" name="endCreateTime" id="endCreateTime" lay-verify="datetime" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="submitSearch">搜索</button>
        <button type="reset" class="layui-btn layui-btn-primary">清空</button>
    </div>
</form>

<!--页内容-->
<table class="layui-hide" id="test" lay-filter="test"></table>
<!--左上角：头部工具栏事件-&#45;&#45;批量删除、添加-->


<!--右侧：触发单元格工具事件-单个元素的编辑-->
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">


        <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
        <!--<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="detail">
            <span th:text="">
        </a>-->
    </div>
</script>

<!--在table中展示图片的templet-->
<script>


</script>




<script>
    /*layui库中表单模块form，表格模块table,日期选择器模块laydate,upload上传文件*/
    layui.use(['form','table','laydate','upload'],function (){
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;
        var upload = layui.upload;


        /*$.post(
            '/operLog/list',
            function (result) {
                if (result.code == 0){
                    $(result.data).each(function () {
                        $('#logType').append('<option>'+this.logType+'</option>');
                    })
                    //局部变动，渲染一下
                    form.render('select');
                }
            },
            'json'
        );*/

        //日期
        laydate.render({
            elem: '#beginCreateTime',
            type: 'datetime'
        });
        laydate.render({
            elem: '#endCreateTime',
            type: 'datetime'
        });


        // 创建渲染实例
        table.render({
            elem:'#test', /*页内容的id*/
            id:'tableId',
            url:'/operLog/list',
            toolbar: '#toolbarDemo',
            cols:[
                [
                    {field:'id',title:'ID',sort:true,width: 100},/*sort用于排序*/
                    {field: 'module',title: '操作模块'},
                    /*{field: 'logType',title: '操作类型'},*/
                    {field: 'logType',title: '操作类型',templet:logType},
                    {field: 'userId',title: '用户名id',escape:false},/*escape:false处理内容中的代码*/
                    {field: 'userName',title: '用户名称',width: 100},
                    {field: 'requestMethod',title: '请求方法'},
                    {field: 'requestUri',title: '请求地址'},
                    {field: 'responseParams',title: '响应参数',width: 170},
                    {field: 'createTime',title: '开始时间',width: 170},
                    {field: 'updateTime',title: '更新时间',width: 170},
                    {fixed:'right',title: '操作',width:100,toolbar:'#barDemo'}
                ]
            ],
            page: true
        });

        function logType(data) {
            console.log(data);
            var logType = data.logType;
            if (logType == 'INFO'){
                return "<span style='color: green'>INFO</span>"
            } else if (logType == "ERROR") {
                return "<span style='color: red'>ERROR</span>"
            } else {
                return "<span style='color: orange'>DEBUG</span>"
            }
        }



        //搜索提交
        form.on('submit(submitSearch)',function (data) {
            //获得表单字段
            var field = data.field;
            //执行搜索重载
            table.reload('tableId',{
                page: {
                    //重新从第1页开始
                    curr:1
                },
                //搜索的字段
                where:field
            });
            //阻止默认 form跳转
            return false;
        });


        //触发单元格工具事件---单个元素的删除、编辑
        table.on('tool(test)',function (obj) {
            //获得当前行数据
            var data = obj.data;
            console.log(obj);
            console.log(obj.data);
            if (obj.event === 'detail'){
                layer.open({
                    type:2,
                    title:'详情信息',
                    area:['90%','90%'],//宽高
                    content:'/page/operLog/details?id=' + data.id,
                })
                //---------------------编辑-------------------------------
            } else if (obj.event === 'update'){
                var index = layer.open({
                    type:2,
                    title:'编辑数据',
                    area:['90%','90%'],// 宽高
                    content:'/page/operLog/update?id=' + data.id,
                });
            }
        });
    });
</script>
</body>
</html>
